<template>
  <div v-if="trendShow">
    <div class="h12" />
    <el-card>
      <div slot="header" class="clearfix d-flex">
        <b>趋势分析</b>
        <div class="search-container" style="display: flex">
          <el-tooltip
            class="item"
            content="此选择项代表查询出来数据是合并在同一趋势图中显示还是按不同的属性分别显示为独立的趋势图"
            effect="dark"
            placement="top"
          >
            <el-radio-group v-model="displayType" class="mr12">
              <el-radio-button
                v-for="(item, index) in displayTypes"
                :key="index"
                :label="item.value"
              >
                {{ item.name }}
              </el-radio-button>
            </el-radio-group>
          </el-tooltip>
          <el-tooltip
            class="item"
            content="此选择项代表查询出来数据的间隔时间，如1天指的是1天显示1条数据"
            effect="dark"
            placement="top"
          >
            <el-radio-group v-model="interType" class="mr12">
              <el-radio-button
                v-for="(item, index) in interTypes"
                :key="index"
                :label="item.value"
              >
                {{ item.name }}
              </el-radio-button>
            </el-radio-group>
          </el-tooltip>
          <el-date-picker
            v-model="timetran"
            end-placeholder="结束日期"
            range-separator="至"
            start-placeholder="开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
          <el-button class="btn" type="primary" @click="search">查询</el-button>
        </div>
      </div>
      <div class="trend-container-common">
        <div v-if="displayType === 1">
          <ve-line
            v-if="
              rawData && rawData.categories && rawData.categories.length > 0
            "
            :data="chartData"
            :extend="chartExtend"
            :settings="chartSettings"
          />
          <el-empty v-else description="暂无任何趋势分析数据" />
        </div>
        <div v-else>
          <template v-if="rawData && rawData.series">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane
                v-for="(item, index) in rawData.series"
                :key="index"
                :label="item.name"
                :name="'activeName' + index"
              >
                <div v-if="activeName === 'activeName' + index">
                  <el-empty
                    v-if="getChartData(item).rows.length === 0"
                    description="暂无任何趋势分析数据"
                  />
                  <div v-else>
                    <ve-line
                      v-if="item.type === 'line'"
                      :data="getChartData(item)"
                      :extend="chartExtend"
                      :settings="chartSettings"
                    />
                    <ve-histogram
                      v-else
                      :data="getChartData(item)"
                      :extend="chartExtend"
                      :settings="chartSettings"
                    />
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { statistics as getAll } from '@/api/device'
  export default {
    data() {
      return {
        activeName: 'activeName0',
        interType: '1h',
        interTypes: [
          { value: '1h', name: '1小时' },
          { value: '1d', name: '1天' },
          { value: '30d', name: '1月' },
        ],
        displayTypes: [
          { value: 1, name: '合并显示' },
          { value: 2, name: '分开显示' },
        ],
        displayType: 2,
        timetran: '',
        listQuery: { day: 1 },
        rawData: null,
        chartData: null,
        chartSettings: {},
      }
    },
    computed: {
      ...mapGetters(['currentDevice', 'currentDeviceShow']),
      trendShow() {
        return (
          this.currentDevice.rtuPortDisplays.filter((val) => {
            return val.identity.indexOf('census') > -1
          }).length > 0
        )
      },
      chartExtend() {
        const legendShow = this.displayType === 1
        return {
          legend: {
            show: legendShow,
          },
          series: {
            showSymbol: false,
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '2%',
            top: '12%',
            containLabel: true,
          },
        }
      },
    },
    watch: {
      currentDeviceShow: {
        handler(newVal) {
          if (newVal) {
            this.getStatistics(this.listQuery)
          }
        },
        deep: true,
        immediate: true,
      },
      interType(newVal) {
        this.getStatistics({ per: newVal })
      },
    },
    methods: {
      getChartData(item) {
        const columns = ['日期', item.name]
        const rows = []
        const categories = this.rawData.categories || []
        item.data.forEach((val, index) => {
          const citem = {}
          citem['日期'] = categories[index]
          citem[item.name] = val
          rows.push(citem)
        })
        const res = {
          columns,
          rows,
        }
        return res
      },
      search() {
        this.getStatistics({ created_at: this.timetran })
      },
      async getStatistics(params) {
        Object.assign(
          this.listQuery,
          { serialno: this.currentDevice.serialno },
          params
        )
        const { data } = await getAll(this.listQuery)
        this.rawData = data
        this.chartData = this.formatStatistics(data.categories, data.series)
        this.chartSettings = data.chartSettings
      },
      formatStatistics(categories, series) {
        const columns = ['日期']
        const rows = []
        for (let i = 0; i < categories.length; i++) {
          const item = { 日期: categories[i] }
          for (const citem of series) {
            item[citem.name] = citem.data[i]
            if (i === 0) {
              columns.push(citem.name)
            }
          }
          rows.push(item)
        }
        return {
          columns: columns,
          rows: rows,
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .flex {
    align-items: center;
  }
  .search-container {
    margin-left: auto;
    .btn {
      margin-left: 12px;
    }
  }
</style>
